/**
 * 排行榜表格组件
 */

import React from 'react';
import { StockRankingData, RankingType } from '@shared/types/market';
import { formatNumber, formatLargeNumber, getPnLColor } from '@shared/utils';

interface RankingTableProps {
  data: StockRankingData[];
  type: RankingType;
}

const RankingTable: React.FC<RankingTableProps> = ({ data, type }) => {
  if (!data || data.length === 0) {
    return (
      <div
        style={{
          padding: '40px',
          textAlign: 'center',
          color: '#999',
          fontSize: '14px',
          backgroundColor: '#fafafa',
          borderRadius: '8px',
        }}
      >
        暂无数据
      </div>
    );
  }

  return (
    <div style={{ overflowX: 'auto' }}>
      <table
        style={{
          width: '100%',
          borderCollapse: 'collapse',
          fontSize: '14px',
        }}
      >
        <thead>
          <tr style={{ backgroundColor: '#fafafa', borderBottom: '2px solid #f0f0f0' }}>
            <th
              style={{
                padding: '12px 8px',
                textAlign: 'center',
                fontWeight: '600',
                color: '#666',
                width: '50px',
              }}
            >
              序号
            </th>
            <th
              style={{
                padding: '12px 8px',
                textAlign: 'left',
                fontWeight: '600',
                color: '#666',
              }}
            >
              代码
            </th>
            <th
              style={{
                padding: '12px 8px',
                textAlign: 'left',
                fontWeight: '600',
                color: '#666',
              }}
            >
              名称
            </th>
            <th
              style={{
                padding: '12px 8px',
                textAlign: 'right',
                fontWeight: '600',
                color: '#666',
              }}
            >
              最新价
            </th>
            <th
              style={{
                padding: '12px 8px',
                textAlign: 'right',
                fontWeight: '600',
                color: '#666',
              }}
            >
              {type === 'top_turnover' ? '成交额' : '涨跌幅'}
            </th>
          </tr>
        </thead>
        <tbody>
          {data.map((stock, index) => {
            const changeColor = getPnLColor(stock.change_pct);
            const isPositive = stock.change_pct >= 0;
            
            return (
              <tr
                key={stock.code}
                style={{
                  borderBottom: '1px solid #f0f0f0',
                  transition: 'background-color 0.2s',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.backgroundColor = '#fafafa';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.backgroundColor = 'transparent';
                }}
              >
                {/* 序号 */}
                <td style={{ padding: '12px 8px', textAlign: 'center' }}>
                  <div
                    style={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      width: '24px',
                      height: '24px',
                      borderRadius: '4px',
                      backgroundColor: index < 3 ? '#fff7e6' : 'transparent',
                      color: index < 3 ? '#faad14' : '#666',
                      fontWeight: index < 3 ? '600' : '400',
                      fontSize: '13px',
                    }}
                  >
                    {stock.rank}
                  </div>
                </td>

                {/* 代码 */}
                <td style={{ padding: '12px 8px', color: '#333', fontFamily: 'monospace' }}>
                  {stock.code}
                </td>

                {/* 名称 */}
                <td style={{ padding: '12px 8px', fontWeight: '500', color: '#333' }}>
                  {stock.name}
                  {stock.is_limit_up && (
                    <span
                      style={{
                        marginLeft: '6px',
                        fontSize: '11px',
                        color: '#fff',
                        backgroundColor: '#ff4d4f',
                        padding: '2px 6px',
                        borderRadius: '4px',
                      }}
                    >
                      涨停
                    </span>
                  )}
                  {stock.is_limit_down && (
                    <span
                      style={{
                        marginLeft: '6px',
                        fontSize: '11px',
                        color: '#fff',
                        backgroundColor: '#52c41a',
                        padding: '2px 6px',
                        borderRadius: '4px',
                      }}
                    >
                      跌停
                    </span>
                  )}
                </td>

                {/* 最新价 */}
                <td style={{ padding: '12px 8px', textAlign: 'right', fontWeight: '500' }}>
                  ¥{formatNumber(stock.current_price, { decimals: 2 })}
                </td>

                {/* 涨跌幅/成交额 */}
                <td
                  style={{
                    padding: '12px 8px',
                    textAlign: 'right',
                    fontWeight: '600',
                    color: type === 'top_turnover' ? '#333' : changeColor,
                  }}
                >
                  {type === 'top_turnover' ? (
                    formatLargeNumber(stock.turnover)
                  ) : (
                    <>
                      {isPositive ? '+' : ''}
                      {formatNumber(stock.change_pct, { decimals: 2, suffix: '%' })}
                    </>
                  )}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default RankingTable;

